import React, { memo, useEffect } from 'react'

import { HotRecommendWrapper } from "./style";
import LJThemeHeaderRCM from 'components/theme-header-rcm'
import LJSongsCover from 'components/songs-cover'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getHotRecommendAction } from '../../store/actionCreators';


export default memo(function LJHotRecommend() {
    // state

    // redux hooks
    const dispatch = useDispatch()
    const { hotRecommends } = useSelector(state => ({
        hotRecommends: state.getIn(["recommend","hotRecommends"])
    }), shallowEqual)

    // other hooks
    useEffect(() => {
        dispatch(getHotRecommendAction(8))
    }, [dispatch])

    // 其他业务逻辑

    return (
        <HotRecommendWrapper>
            <LJThemeHeaderRCM title="热门推荐"  keywords={["华语","流行","民谣","摇滚","电子"]}></LJThemeHeaderRCM>
            <div className="recommend-list">
                {
                    hotRecommends.map((item, index) => {
                        return (
                            <LJSongsCover key={item.id} info={item}/>
                        )
                    })
                }
            </div>
        </HotRecommendWrapper>
    )
})
